/*
 * @Description: 统计选择
 * @Author: Zzt
 * @Date: 2022-11-10 15:22:07
 * @LastEditTime: 2022-12-07 14:02:42
 */
import { Col, Form, Row, Segmented, Select } from 'antd';
import { CaretDownFilled } from '@ant-design/icons';
import classNames from 'classnames/bind';
import styles from '../styles/visualization.module.scss';
import { useBasicsVisualizationContext } from '../contexts/BasicsVisualizationContext';
import { memo, useEffect, useState } from 'react';
import MultiSelect from './Assembly/MultiSelect';

const cx = classNames.bind(styles);
const Operate = (props: any) => {
  const [form] = Form.useForm();
  const { setChartType, chartType } = useBasicsVisualizationContext();
  const { type, onChange, segmented, quanZongOptions } = props;
  const [segmentValue, setSegmentValue] = useState<string | number>(segmented[0].value);
  const [zongValue, setZongValue] = useState([]);
  const [chioce, setChioce] = useState({});

  const options = [
    {
      value: 'tenThousand',
      label: `单位 ：万个`
    },
    {
      value: 'thousand',
      label: `单位 ：千个`
    },
    {
      value: 'hundred',
      label: `单位 ：百个`
    }
  ];

  const changeChart = (value: any) => {
    console.log(value);
    setChartType(value);
  };
  // const zongChange = (value: any) => {
  //   console.log(value);
  //   setZongValue(value);
  // };
  useEffect(() => {
    setZongValue(quanZongOptions.map((item: any) => item.value));
  }, []);
  useEffect(() => {
    onChange(zongValue, segmentValue);
  }, [segmentValue, zongValue]);
  const onChangeChioce = (value: any, allValue: any) => {
    setZongValue(allValue);
    // console.log('gaibiao', value, allValue);
  };
  return (
    <div>
      <div className={cx('chart-operate')}>
        <div>
          <Col>按全宗内-{type}</Col>
        </div>
        <div className={cx('chart-select')}>
          {/* <Select
            mode="multiple"
            maxTagCount={0}
            placeholder="全宗选择"
            style={{ width: '80px' }}
            bordered={false}
            className="select-after"
            suffixIcon={<CaretDownFilled />}
            onChange={zongChange}
            options={quanZongOptions}
          /> */}
          <Form
            form={form}
            onValuesChange={onChangeChioce}
            layout="inline"
            initialValues={{ danwei: '1' }}
          >
            <Form.Item name={'zongValue'} key="zongValue">
              <MultiSelect title="全宗选择" checkList={quanZongOptions} />
            </Form.Item>
          </Form>
          <Select
            suffixIcon={<CaretDownFilled />}
            defaultValue="tenThousand"
            bordered={false}
            className="select-after"
            options={options}
          />
          <Select
            suffixIcon={<CaretDownFilled />}
            value={chartType}
            bordered={false}
            className="select-after"
            options={[
              {
                value: 1,
                label: '饼状图'
              },
              {
                value: 2,
                label: '柱状图'
              },
              {
                value: 3,
                label: '折线图'
              }
            ]}
            onChange={changeChart}
          />
        </div>
      </div>
      <Segmented
        options={segmented}
        value={segmentValue}
        onChange={(val) => setSegmentValue(val)}
      />
    </div>
  );
};
export default Operate;
